<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title>首页 - 驴妈妈流立方</title>
    <meta name="description" content="overview &amp; stats" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrap.css" />

    <!-- text fonts -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/fonts/fonts.googleapis.com.css" />
    <!-- BootstrapValidator -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/bootstrapValidator.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/daterangepicker.css">
    <!-- ace styles -->
    <link rel="stylesheet" href="${rc.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="${rc.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="${rc.contextPath}/stylesheets/loading.css" />
    <style type="text/css">  
		.autocut {  
			width:100px;  
			overflow:hidden;  
			white-space:nowrap;  
			text-overflow:ellipsis;  
			-o-text-overflow:ellipsis;  
			-icab-text-overflow: ellipsis;  
			-khtml-text-overflow: ellipsis;  
			-moz-text-overflow: ellipsis;  
			-webkit-text-overflow: ellipsis;  
		}  
	</style>  
</head>

<body class="no-skin" style="background-color: #FFF;">
	<div class="page-content">
		<div class="tabbable">
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-header widget-header-small">
							<h5 class="widget-title lighter">筛选条件</h5>
						</div>
						<div class="widget-body" style="background-color: #EFF3F8;">
							<div class="widget-main">
								<form class="form-inline" id="searchForm" method="post" action="#">
									<input type="hidden" id = "groupByName"/>
									<div class="row widget-main">
										<div class="form-group">
											<label >品类筛选</label>
											<select multiple="multiple" class=" chosen-select" tabindex="2"
													name="categoryName" id="category" >

											</select>
										</div>
										<div class="form-group">
											<label >渠道筛选</label>
											<select multiple="multiple" class="chosen-select" tabindex="2"
													name="saleChannel" id="channel" >
											</select>
										</div>
										<div class="form-group">
											<label >供应商筛选</label>
											<select multiple="multiple"  class="chosen-select" tabindex="2"
													name="supplierName" id="supplier">

											</select>
										</div>
										<div class="form-group">
											<button id="search" type="button" onclick="searchClick();" class="btn btn-pink btn-sm">
												<span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
												Search
											</button>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-14">
					<div class="widget-box">

						<div class="widget-body">
							<div class="widget-main row">
								<div class="col-xs-10">
									<div class="widget-box">
										<div class="widget-body">
											<h4 style="text-align: center;"></h4>
											<div id="chart1" style="width: 100%; height: 500px; margin: 0 auto;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-14">
					<div class="widget-box" id= "categoryNameDiv" style="overflow: scroll;height: 440px">
						<button onclick="exportExcel('groupByCategory')" type="button" class="btn btn-pink btn-sm">
							<span class="ace-icon fa icon-on-right bigger-110"></span>
							导出excel
						</button>
						<div class="widget-body">
							<table class="hovertable table table-bordered" >
								<tr>
									<th  width="300px" style="position: absolute; left: 0px;  background-color: white;">品类</th>
									<#if currentDays?? && currentDays?size&gt;0>
									<#list currentDays as day>
										<#if day_index = 0><th style="padding-left: 300px;" >${day!}</th>
										<#else><th  >${day!}</th>
										</#if>
									</#list>
								</#if>
								</tr>
								<tbody id ="categoryName">

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-14">
					<div class="widget-box"  id= "saleChannelDiv" style="overflow: scroll;height: 440px">
						<button onclick="exportExcel('groupByChannel')" type="button" class="btn btn-pink btn-sm">
							<span class="ace-icon fa icon-on-right bigger-110"></span>
							导出excel
						</button>
						<div class="widget-body">
							<table class="hovertable table table-bordered" >
								<tr>
									<th  width="300px" style="position: absolute; left: 0px;  background-color: white;">渠道</th>
									<#if currentDays?? && currentDays?size&gt;0>
										<#list currentDays as day>
											<#if day_index = 0><th style="padding-left: 300px;" >${day!}</th>
											<#else><th  >${day!}</th>
											</#if>
										</#list>
									</#if>
								</tr>
								<tbody id ="saleChannel">

								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-xs-14">
					<div class="widget-box" id= "regionnameDiv" style="overflow: scroll;height: 440px">
						<div class="widget-body">
							<button onclick="exportExcel('groupByRegionname')" type="button" class="btn btn-pink btn-sm">
								<span class="ace-icon fa icon-on-right bigger-110"></span>
								导出excel
							</button>
							<table class="hovertable table table-bordered" >
								<tr>
									<th  width="300px" style="position: absolute; left: 0px;  background-color: white;">大区</th>
									<#if currentDays?? && currentDays?size&gt;0>
										<#list currentDays as day>
											<#if day_index = 0><th style="padding-left: 300px;" >${day!}</th>
											<#else><th  >${day!}</th>
										</#if>
									</#list>
								</#if>
								</tr>
								<tbody id ="regionname"></tbody>
							</table>
						</div>
					</div>
					<!--分页开始-->
					<div class="ui-jqgrid" id="ui-jqgrid-regionname" >
						<div id="grid-pager"
							 class="ui-state-default ui-jqgrid-pager ui-corner-bottom" dir="ltr">
							<div id="pg_grid-pager" class="ui-pager-control" role="group">
								<table cellspacing="0" cellpadding="0" border="0" class="ui-pg-table"
									   style="width: 100%; table-layout: fixed; height: 100%;" role="row">
									<tbody>
									<tr>
										<td id="grid-pager_left" align="left"></td>
										<td id="grid-pager_center" align="center"
											style="white-space: pre; width: 343px;"><table
												cellspacing="0" cellpadding="0" border="0"
												style="table-layout: auto;" class="ui-pg-table">
											<tbody>
											<tr>
												<td id="first_grid-pager-regionname" class="ui-pg-button ui-corner-all"
													style="cursor: pointer;"><span attr="first"
																				   class="ui-icon ace-icon fa fa-angle-double-left bigger-140"></span></td>
												<td id="prev_grid-pager-regionname" class="ui-pg-button ui-corner-all"
													style="cursor: pointer;"><span attr="pre"
																				   class="ui-icon ace-icon fa fa-angle-left bigger-140"></span></td>
												<td dir="ltr">Page <input class="ui-pg-input" id="ui-pg-input-regionname" type="text"
																		  size="2" role="textbox"> of <span
														id="sp_1_grid-pager"></span></td>
												<td id="next_grid-pager-regionname" class="ui-pg-button ui-corner-all"
													style="cursor: pointer;"><span attr="next"
																				   class="ui-icon ace-icon fa fa-angle-right bigger-140"></span></td>
												<td id="last_grid-pager-regionname" class="ui-pg-button ui-corner-all"
													style="cursor: pointer;"><span attr="last"
																				   class="ui-icon ace-icon fa fa-angle-double-right bigger-140"></span></td>
											</tr>
											</tbody>
										</table></td>
										<td id="grid-pager_right" align="right"><div id="pagerView-regionname" dir="ltr"
																					 style="text-align: right" class="ui-paging-info"></div></td>
									</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!--分页结束-->
				</div>
			</div>
		</div>
	</div>


	<script src="${rc.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootstrap.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script src="${rc.contextPath}/assets/js/jquery.gritter.min.js"></script>
	<script src="${rc.contextPath}/assets/js/spin.min.js"></script>
	<!-- ace scripts -->
	<script src="${rc.contextPath}/assets/js/ace-elements.min.js"></script>
	<script src="${rc.contextPath}/assets/js/ace.min.js"></script>
	<!-- validator scripts -->
	<script src="${rc.contextPath}/assets/js/bootstrapValidator.min.js"></script>
	<!-- user scripts -->
	<script src="${rc.contextPath}/assets/js/user/base.js"></script>
	<!-- ace settings handler -->
	<script src="${rc.contextPath}/assets/js/ace-extra.min.js"></script>
	<script src="${rc.contextPath}/assets/js/chosen.jquery.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/javascripts/loading.js"></script>
	<!--ECharts-->
	<script type="text/javascript" src="${rc.contextPath}/javascripts/echarts.js"></script>
	<script src="${rc.contextPath}/assets/js/bootbox.min.js"></script>
	<script type="text/javascript">
	    // var seriesData = ${stocks};
	    var bubbleRateDom1 = document.getElementById("chart1");
	    var eChartsShow = echarts.init(bubbleRateDom1,"light");
	
	    $('.chosen-select').chosen({  allow_single_deselect : true});
	
	    $('.chosen-select').trigger("liszt:updated");
	
	    var option = {
            title: {
                text: "库存量",
                subtext: '数据推送时间为：',
                x: "center"
            },
	        tooltip: {
	            trigger: "item",
	            formatter: "{a} <br/>{b} : {c}"
	        },
	        legend: {
	            x: 'left',
	            data: ["库存量"]
	        },
	        xAxis: [
	            {
	                type: "category",
	                name: "x",
	                splitLine: {show: false},
	                data: ${days}
	            }
	        ],
	        dataZoom: [
                 {
                     show: true,
                     realtime: true,
                    
                 },
                 {
                     type: 'inside',
                     realtime: true,
                     
                 }
            ],
	        yAxis: [
	            {
	                type: "value",
	                name: "y"
	            }
	        ],
	        toolbox: {
	            show: false,
	            feature: {
	                mark: {
	                    show: true
	                },
	                dataView: {
	                    show: true,
	                    readOnly: true
	                },
	                restore: {
	                    show: true
	                },
	                saveAsImage: {
	                    show: true
	                }
	            }
	        },
	        calculable: true,
	        series: [
	            {
	                name: "库存量",
	                type: "line",
	                // data:  seriesData

	            }
	        ]
	    };
        var firstPage;
        var prePage;
        var nextPage;
        var lastPage;
        jQuery(function($) {

            //翻页
            $('.ui-icon.ace-icon.fa').click(function () {
                var pager = $(this).attr('attr');
                if(pager === 'first'){
                    searchRegion(firstPage);
                }else if(pager === 'pre'){
                    searchRegion(prePage)
                }else if(pager === 'next'){
                    searchRegion(nextPage)
                }else if(pager === 'last'){
                    searchRegion(lastPage);
                }
            });
        });
	
	
	    if (option && typeof option === "object") {
	        eChartsShow.setOption(option, true);
	    }
	    //加载供应商类型列表
		loadSupplier();
	    //加载品类
		loadCategory();
	    //加载渠道
		channelLoad();
	    function channelLoad(){
	    	$.ajax({
	        	url : '${rc.contextPath}/stock/channelSearch',
	            type : "POST",
	            dataType:"json",
	            success:function(data) {
	                var channelList = data
	                html = '';
	                for(var i=0 ; i< channelList.length; i++){
	                    html += '<option value="' + channelList[i] + '">' + channelList[i] + '</option>';
	                }
	                $("#channel").html(html);
	                $('#channel').chosen("destroy").chosen();
	            },
	            error:function(data) {
	            }
	        });
	    }
	    function loadCategory(){
	    	$.ajax({
	        	url : '${rc.contextPath}/stock/categorySearch',
	            type : "POST",
	            dataType:"json",
	            success:function(data) {
	                var categoryList = data
	                html = '';
	                for(var i=0 ; i< categoryList.length; i++){
	                    html += '<option value="' + categoryList[i] + '">' + categoryList[i] + '</option>';
	                }
	                $("#category").html(html);
	                $('#category').chosen("destroy").chosen();
	            },
	            error:function(data) {
	            }
	        });
	    }
	   
	    function loadSupplier(){
	        $.ajax({
	            url : '${rc.contextPath}/stock/supplierNameSearch',
	            type : "POST",
	            dataType:"json",
	            success:function(data) {
	                var supplierList = data
	                var html = '';
	                for(var i=0;i<supplierList.length;i++){
	                    html += '<option value="'+supplierList[i]+'">'+supplierList[i]+'</option>';
	                }
	                $("#supplier").html(html);
	                $('#supplier').chosen("destroy").chosen();
	            },
	            error:function(data) {
	            }
	        });
	    }
	    /**
		 * 获取搜索框的条件
		 * */
	    function getBaseFormData(){
            var categoryName = $("#category").val();
            var saleChannel = $("#channel").val();
            var supplierName = $("#supplier").val();
            var formData ={
                categoryName : categoryName,
                saleChannel : saleChannel,
                supplierName : supplierName
            }
            return formData;
		}

	    function searchClick(){
	    	var formData = getBaseFormData();
            loadChart(formData);
            searchCategory(formData);
            searchChannel(formData);
            searchRegion(1);
	    }

	    /**
		 * 加载图表
		 * */
	    function loadChart(formData) {
            $.ajax({
                url : '${rc.contextPath}/stock/gatherSearch',
                type : "POST",
                dataType:"json",
                data : JSON.stringify(formData),
                contentType : "application/json",
                beforeSend: function(){
                    openPartialLayer($("#chart1"));
                },
                complete: function(){
                    removeLoading($("#chart1"));
                },
                success:function(data) {
                    if (data && data.code == 1){
                        eChartsShow.setOption({
                            title: {
                                text: "库存量",
                                subtext: '数据推送时间为：' + data.message,
                                x: "center"
                            },
                            series: [{
                                // 根据名字对应到相应的系列
                                data: data.dataList
                            }]
                        });
                    }else{
                        bootbox.alert({
                            buttons: {
                                ok: {
                                    label: '确定'
                                }
                            },
                            message: data.message,
                            title: "温馨提示",
                        });

                    }
                },
                error:function(data) {

                }
            })
        }
	    /**
	    	查询分类明细
	    */
	    function searchCategory(formData){
			formData.groupByCategory = true;
	    	search(formData, "categoryName");
	    }
	    
	    /**
    	查询渠道明细
    	*/
	    function searchChannel(formData){
            formData.groupByCategory = false;
            formData.groupByChannel = true;
	    	search(formData, "saleChannel");
	    }
	    /**
    	查询大区明细
    	*/
	    function searchRegion(currentPage){
            var formData = getBaseFormData();
            formData.groupByCategory = false;
            formData.groupByChannel = false;
            formData.groupByRegionname = true;
            formData.currentPage = currentPage;
	    	searchPage(formData, "regionname");
	    }
        /**
         params 需要传的参数
         objId table id名称
         */
        function searchPage(params, objId){
            var layId = "#" + objId + "Div";
            var url = '${rc.contextPath}/stock/searchPageUtil';
            openPartialLayer($(layId));
            $.ajax({
                url : url,
                type : "POST",
                dataType:"json",
                data : JSON.stringify(params),
                contentType : "application/json",
                success:function(data) {
                    removeLoading($(layId));
                    if (data && data.code == 1){
                        var page = data.page;
                        var viewId = "#pagerView-" + objId ;
                        $(viewId).text('View ' + page.startRow + ' - ' + page.endRow + ' of ' + page.total);
                        var pginputId= "#ui-pg-input-"+objId;
                        $(pginputId).val(page.pageNum);
                        if(page && page.pages>0){
                            setTableData(page.list, objId);
                            var ui_pageId = "#ui-jqgrid-" + objId;
                            $(ui_pageId).show();
                            firstPage = page.firstPage;
                            prePage = page.prePage;
                            nextPage = page.nextPage;
                            lastPage = page.lastPage;

                        }
                    }
                },
                error:function(data) {

                }
            })
        }
	    
	    /**
	    params 需要传的参数
	    objId table id名称
	    */
	   	function search(params, objId){
	   		var layId = "#" + objId + "Div";
	    	openPartialLayer($(layId));
	   		$.ajax({
	            url : '${rc.contextPath}/stock/searchRedis',
	            type : "POST",
	            dataType:"json",
	            data : JSON.stringify(params),
	            contentType : "application/json",  
	            success:function(data) {
	            	removeLoading($(layId));
	            	if (data && data.code == 1){
                        setTableData(data.dataList, objId);
	            	}
	            },
	            error:function(data) {

	            }
	        })
	   	}

        /**
		 * 导出excel
         * @param groupByName
         */
        function exportExcel(groupByName) {
            var newUrl = '${rc.contextPath}/stock/exportStockGather';    //设置新提交地址
            $("#searchForm").attr('action',newUrl);    //通过jquery为action属性赋值
            $("#groupByName").attr('name',groupByName);
            $("#groupByName").val(true);
            $("#searchForm").submit();    //提交ID为myform的表单
        }
        function setTableData(dataList, objId){
            if (dataList && dataList.length>0){
                var varHtml='';
                for (var i=0; i<dataList.length; i++){
                    var objData = dataList[i];
                    varHtml+='<tr>'
                        +'<td width="300px" style="position: absolute; left: 0px;  background-color: white;"><div class="autocut" title="' + objData[objId] + '">' + objData[objId] + '</div></td>'
                        +'<td style="padding-left: 300px;" >'+objData.stock2+'</td>'
                        +'<td>'+objData.stock3+'</td>'
                        +'<td>'+objData.stock4+'</td>'
                        +'<td>'+objData.stock5+'</td>'
                        +'<td>'+objData.stock6+'</td>'
                        +'<td>'+objData.stock7+'</td>'
                        +'<td>'+objData.stock8+'</td>'
                        +'<td>'+objData.stock9+'</td>'
                        +'<td>'+objData.stock10+'</td>'
                        +'<td>'+objData.stock11+'</td>'
                        +'<td>'+objData.stock12+'</td>'
                        +'<td>'+objData.stock13+'</td>'
                        +'<td>'+objData.stock14+'</td>'
                        +'<td>'+objData.stock15+'</td>'
                        +'<td>'+objData.stock16+'</td>'
                        +'<td>'+objData.stock17+'</td>'
                        +'<td>'+objData.stock18+'</td>'
                        +'<td>'+objData.stock19+'</td>'
                        +'<td>'+objData.stock20+'</td>'
                        +'<td>'+objData.stock21+'</td>'
                        +'<td>'+objData.stock22+'</td>'
                        +'<td>'+objData.stock23+'</td>'
                        +'<td>'+objData.stock24+'</td>'
                        +'<td>'+objData.stock25+'</td>'
                        +'<td>'+objData.stock26+'</td>'
                        +'<td>'+objData.stock27+'</td>'
                        +'<td>'+objData.stock28+'</td>'
                        +'<td>'+objData.stock29+'</td>'
                        +'<td>'+objData.stock30+'</td>'
                        +'</tr>';
                }
                var idstr = "#" + objId;
                $(idstr).html(varHtml);
            }
        }
	</script>
</body>
</html>